<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        function createShader(gl, type, source) {
            var shader = gl.createShader(type); // 创建着色器对象
            gl.shaderSource(shader, source); // 提供数据源
            gl.compileShader(shader); // 编译 -> 生成着色器
            var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (success) {
                return shader;
            }
            console.log(gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
        }

        function createProgram(gl, vertexShader, fragmentShader) {
            var program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            var success = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (success) {
                return program;
            }
            
            console.log(gl.getProgramInfoLog(program));
            gl.deleteProgram(program);
        }

        const canvas = document.getElementById('canvas');

        let gl = canvas.getContext("webgl")

        var vertexShader = createShader(gl, gl.VERTEX_SHADER, `
        attribute vec4 a_position;
        // 所有着色器都有一个main方法
        
        void main() {
            // gl_Position 是一个顶点着色器主要设置的变量
            gl_Position = a_position;
        }`);
        var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, `
        precision mediump float;
        void main() {
            // gl_FragColor是一个片段着色器主要设置的变量
            gl_FragColor = vec4(1, 0.5, 0, 1);
        }`);

        var program = createProgram(gl, vertexShader, fragmentShader);

        let positionAttributeLocation = gl.getAttribLocation(program, "a_position");

        var positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        var positions = [
            -1, 1,
            -1, -1,
            0, 1,
            0, -1
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
        
        gl.useProgram(program);

        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

        var size = 2;          // 2 components per iteration
        var type = gl.FLOAT;   // the data is 32bit floats
        var normalize = false; // don't normalize the data
        var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
        var offset = 0;        // start at the beginning of the buffer
        gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

        // draw
        var primitiveType = gl.TRIANGLES;
        var offset = 0;
        var count = 4;
        gl.drawArrays(primitiveType, offset, count);
    </script>
</body>
</html>